import React, { Component } from "react";
import "./index.css";

export default class index extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isShowAdd: "none",
      isShowUpdate: "none",
      updateId:"",
    //   新添加的数据
      newEmp: {
        id: "",
        name: "",
        age: "",
      },
    //   修改的数据
      updateEmp:{
        id: "",
        name: "",
        age: "",
      },
    //   查询条件：
      queryObj:{
        id:"",
        name:""
      },
      employees: [
      ],
      allEmps:[
        {
          id: "01001",
          name: "张振宇",
          age: 18,
        },
        {
          id: "01002",
          name: "张晨光",
          age: 17,
        }
      ]
    };
  }

  componentDidMount(){
    this.queryFn();
  }

  //   显示添加窗口
  showAddFn = () => {
    this.setState({
      isShowAdd: "block",
    });
  };
  //   隐藏添加窗口
  hideAddFn = () => {
    this.setState({
      isShowAdd: "none",
    });
  };

  //  添加窗口的双向绑定
  changeVal = (ev) => {
    this.setState({
      newEmp: {
        ...this.state.newEmp,
        [ev.target.name]: ev.target.value,
      },
    });
  };

  //   添加功能
  addEmp = () => {
    this.setState({
      employees: [...this.state.employees, this.state.newEmp],
    });
    this.hideAddFn();
  };

  //   删除功能：
  deleteEmp = (id) => {
    if (window.confirm("亲，您真的要删除吗？")) {
      this.setState({
        employees: this.state.employees.filter((item) => item.id !== id),
      });
    }
  };

  // 显示修改窗口
  showUpdateFn = (id) => {
    this.setState({
        updateId:id,
      isShowUpdate: "block",
      updateEmp:this.state.employees.filter(item=>item.id===id)[0]
    });
  };

  // 隐藏修改窗口
  hideUpdateFn = () => {
    this.setState({
      isShowUpdate: "none",
    });
  };

    //  修改窗口的双向绑定
    changeUpdateVal = (ev) => {
        this.setState({
          updateEmp: {
            ...this.state.updateEmp,
            [ev.target.name]: ev.target.value,
          },
        });
      };

    //  修改数据：
    updateSave=()=>{
        // 1、先找的下标
        const idx = this.state.employees.findIndex(item=>item.id===this.state.updateId)
        // 2、修改数据
        // this.state.employees[idx] = this.state.updateEmp
        const arr = [...this.state.employees];
        arr[idx] = this.state.updateEmp;

        this.setState({
            employees:arr,   
            isShowUpdate:"none"         
        })

    }

    //查询的双向绑定
    changeQueryVal=(ev)=>{
        this.setState({
            queryObj:{
                ...this.state.queryObj,
                [ev.target.name]:ev.target.value
            }
        })
    }

    // 查询功能：
    queryFn=()=>{
      const {id,name} = this.state.queryObj;
      let arr = this.state.allEmps.filter(item=>(id!==""?item.id===id:true) && (name!==""?item.name===name:true));
      this.setState({
        employees:arr
      })
    }

  render() {
    return (
      <div>
        <h1>CRUD(增删改查)</h1>
        {/* 查询区域 */}
        <div>
          工号：
          <input name="id" type="text" value={this.state.queryObj.id} onChange={this.changeQueryVal} />
          姓名：
          <input name="name" type="text"  value={this.state.queryObj.name} onChange={this.changeQueryVal} />
          <input type="button" value="查询" onClick={this.queryFn} />
          <input type="button" value="添加" onClick={this.showAddFn} />
        </div>
        {/* 列表区域 */}
        <table>
          <tbody>
            <tr>
              <td>工号</td>
              <td>姓名</td>
              <td>年龄</td>
              <td>操作</td>
            </tr>
            {this.state.employees.map((item) => (
              <tr key={item.id}>
                <td>{item.id}</td>
                <td>{item.name}</td>
                <td>{item.age}</td>
                <td>
                  <input
                    type="button"
                    value="修改"
                    onClick={() => this.showUpdateFn(item.id)}
                  />
                  <input
                    type="button"
                    value="删除"
                    onClick={() => this.deleteEmp(item.id)}
                  />
                </td>
              </tr>
            ))}
          </tbody>
        </table>
        {/* 添加区域 */}
        <div className="add-box" style={{ display: this.state.isShowAdd }}>
          <h1>添加</h1>
          <p>
            工号：
            <input
              name="id"
              type="text"
              value={this.state.newEmp.id}
              onChange={this.changeVal}
            />
          </p>
          <p>
            姓名：
            <input
              name="name"
              type="text"
              value={this.state.newEmp.name}
              onChange={this.changeVal}
            />
          </p>
          <p>
            年龄：
            <input
              name="age"
              type="text"
              value={this.state.newEmp.age}
              onChange={this.changeVal}
            />
          </p>
          <input type="button" value="添加" onClick={this.addEmp} />
          <input type="button" value="取消" onClick={this.hideAddFn} />
        </div>

        {/* 修改区域 */}
        <div className="update-box" style={{ display: this.state.isShowUpdate }}>
          <h1>修改</h1>
          <p>
            工号：
            <input
              name="id"
              type="text"
              value={this.state.updateEmp.id}
              onChange={this.changeUpdateVal}
            />
          </p>
          <p>
            姓名：
            <input
              name="name"
              type="text"
              value={this.state.updateEmp.name}
              onChange={this.changeUpdateVal}
            />
          </p>
          <p>
            年龄：
            <input
              name="age"
              type="text"
              value={this.state.updateEmp.age}
              onChange={this.changeUpdateVal}
            />
          </p>
          <input type="button" value="保存" onClick={this.updateSave} />
          <input type="button" value="取消" onClick={this.hideUpdateFn} />
        </div>
      </div>
    );
  }
}
